<!DOCTYPE html>
<html>
	<head>
		<title>testEvent</title>
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/EventUtil.js"></script>
		<!--<script type="text/javascript" src="js/testLoad.js"></script>-->
		<script type="text/javascript">
			function showMsg(){
				alert('Hello world');
			}
			
			
			function showKeyCode(event){
				alert(event.keyCode);
			}
			/*ff does not support!
			//event in ff,just run as var or in site
			function showKeyCode(){
				alert(event.keyCode);
			}
			*/
			
			
		</script>		
	</head>
	<body>
		<fieldset>
		<legend>test1</legend>
		<div id="div1" class="div">
			<ul>
				<li><input id="i1" type="text" name="i1"/></li>
				<li><input id="i2" type="text" name="i2"/></li>
				<li><input id="i3" type="text" name="i3"/></li>
				<li><input id="i4" type="text" name="i4" onKeyPress="showKeyCode(event)"/></li>
			</ul>
		</div>
		<div>
			<input type="button" id="showMsgButton1" value="showMsgButton1" onclick="showMsg()"/>
			<input type="button" id="showMsgButton2" value="showMsgButton2" onclick="alert(event.type)"/>
			<input type="button" id="showMsgButton3" value="showMsgButton3" onclick="alert(this.value)"/>
		</div>
		</fieldset>
		<fieldset>
		<legend>dom0test</legend>
		<div>
			<input type="button" id="button0" value="Click me!" />
		</div>
		</fieldset>
		<fieldset>
		<legend>dom2test</legend>
		<div>
			<input type="button" id="button2" value="Click me!" />
		</div>
		</fieldset>
		<!--
		<fieldset>
		<legend>dom2test2</legend>
		<div>
			<input type="button" id="button3" value="Click me!" />
			<input type="button" id="button4" value="Remove!" />
		</div>
		</fieldset>
		<fieldset>
		<legend>ietest</legend>
		<div>
			<input type="button" id="button5" value="Click me!" />
			<input type="button" id="button6" value="Remove!" />
		</div>
		</fieldset>
		-->
		<fieldset>
		<legend>eventutiltest</legend>
		<div>
			<input type="button" id="button7" value="Click me!" />
			<input type="button" id="button8" value="Remove!" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>eventobjtest</legend>
		<div>
			<input type="button" id="dom0btn" value="dom0btn" />
			<input type="button" id="dom2btn" value="dom2btn" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>DOMEventObjTest1</legend>
		<div>
			<input type="button" id="dEObtn" value="dom0btn" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>DOMEventObjTest2</legend>
		<div>
			<input type="button" id="dEObtn2" value="dom0btn2" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>DOMEventObjTest3</legend>
		<div>
			<input type="button" id="dEObtn3" value="dom0btn3" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>DOMEventObjTest4</legend>
		<div>
			<input type="button" id="dEObtn4" value="dom0btn4" />
		</div>
		</fieldset>
		
		<fieldset>
		<legend>DOMEventObjTest5</legend>
		<div>
			<input type="button" id="dEObtn5" value="dom0btn5" />
		</div>
		</fieldset>
		
		<script type="text/javascript">
			/*
			var b0 = document.getElementById('button0');
			b0.onclick = function(){
				alert('Clicked!');
				alert(this.id);
			};
			
			var b1 = document.getElementById('button2');
			b1.addEventListener('click',function(){
				alert(this.id);
			},false);
			b1.addEventListener('click',function(){
				alert('hello world!');
			},false);
			//if you remove the event,the function will not remove.
			//so you can do it like this:
			var b3 = document.getElementById('button3');
			var b3Handler = function(){
				alert('hello world!');
			};
			b3.addEventListener('click',b3Handler,false);
			b3.removeEventListener('click',b3Handler,false);
			
			//ie event,just only run in ie and opera
			var b5 = document.getElementById('button5');
			//onclick ,is not click.
			function b5handler1(){
				alert('ie onclick!');
				alert(window == this); //true
			};
			function b5handler2(){
				alert('hello world!');
			};
			b5.attachEvent('onclick',b5handler1);
			b5.attachEvent('onclick',b5handler2);
			b5.detachEvent('onclick',b5handler1);
			b5.detachEvent('onclick',b5handler2);
			*/
			
			var b7 = document.getElementById('button7');
			var b8 = document.getElementById('button8');
			
			function b7Handler() {
				alert('b7handler');
			}
			function b8Handler() {
				EventUtil.removeHandler(b7,'click',b7Handler);
			}
			EventUtil.addHandler(b7,'click',b7Handler);
			EventUtil.addHandler(b8,'click',b8Handler);
			
			var dom0btn = document.getElementById('dom0btn');
			var dom2btn = document.getElementById('dom2btn');
			
			dom0btn.onclick = function(event){
				alert(event.type);
			}
			// ie does not support!
			dom2btn.addEventListener('click',function(event){
				alert(event.type);
			},false);
			
			var deo = document.getElementById('dEObtn');
			deo.onclick = function(event){
				alert(event.currentTarget === this);
				alert(event.target === this);
			};
			/*
			document.body.onclick = function(event){
				alert(event.currentTarget === document.body);
				alert(this === document.body);
				alert(event.target === document.getElementById('dEObtn2'));
			};
			*/
			
			var deo3 = document.getElementById('dEObtn3');
			var handler = function(event){
				switch(event.type){
					case 'click':
						alert('Clicked');
						break;
					case 'mouseover':
						event.target.style.backgroundColor = 'green';
						break;
					case 'mouseout':
						event.target.style.backgroundColor = '';
						break;
				}
			};
			deo3.onclick = handler;
			deo3.onmouseover = handler;
			deo3.onmouseout = handler;
			
			var deo4 = document.getElementById('dEObtn4');
			
			deo4.onclick = function(event){
				alert('clicked');
				event.stopPropagation();
			};
			
			document.body.onclick = function(){
				alert('body clicked');
			}
			
			var deo5 = document.getElementById('dEObtn5');
			
			deo5.onclick = function(event){
				alert(event.eventPhase);
			};
			
			document.body.addEventListener('click',function(event){
				alert(event.eventPhase);
			},true);
			
			document.body.onclick = function(){
				alert(event.eventPhase);
			}
			
		</script>
	</body>
</html>